import React from 'react'
import Modal from 'react-modal'
import styled from 'styled-components'
import Config from '../../utils/config.js'

import { fadeAndScaleIn } from '../../components/Animation/'

const CustomModal = ({ isOpen, children }) => {
	return (
		<StyledModal isOpen={isOpen} style={customStyle} ariaHideApp={false}>
			{children}
		</StyledModal>
	)
}

export default CustomModal

const StyledModal = styled(Modal)`
	animation: ${fadeAndScaleIn} 400ms ease-in-out;
	position: relative;
`

const customStyle = {
	overlay: {
		zIndex: Config.modalIndex,
		background: 'rgba(0,0,0,0.5)',
		display: 'flex',
		justifyContent: 'center',
		alignItems: 'center',
	},
}



// WEBPACK FOOTER //
// ./src/containers/Modal/index.js